<template>
	<view :style="viewColor">
		<view class="circle">
			<view class="circle_info">
				<view class="circle_info_content">
					<view class="circle_info_head">
						<view class="circle_avatar"><image :src="circle.avatar"></view>
						<view class="circle_title">{{circle.title}}</view>
					</view>
					<view class="circle_statistics">
						<view class="circle_statistics_item">
							<view class="circle_statistics_num">{{circle.user_circle_count || 0}}</view>
							<view class="circle_statistics_tit">成员</view>
						</view>
						<view class="circle_statistics_item">
							<view class="circle_statistics_num">{{circle.circle_community_count || 0}}</view>
							<view class="circle_statistics_tit">动态</view>
						</view>
						<view class="circle_statistics_item" @click="userCircle">
							<view class="circle_statistics_num"><image :src="circle.user.avatar || '/static/images/f.png'" /></view>
							<view class="circle_statistics_tit">圈主</view>
						</view>
					</view>
					<view class="circle_qr_code_btn" @click="openPopupQrcode">
						<image src="https://img.jukee.net/def/956f8202311211045431019.png" style="width: 160rpx;height: 60rpx;" />
					</view>
				</view>
			</view>
			<view class="navTabBox"  style="position: sticky;top: 0;">
				<view class="longTab">
					<view class="tab-item" v-for="(item,index) in tabList" :key="index" :class="{'on':item.is_type == tabIndex}" @click="bindTab(index)"><text>{{item.title}}</text></view>
				</view>
			</view>
			<view class="circle_content">
				
				<view class="circle_content_h" v-if="tabIndex == 4">
					<view class="circle_content_t">
						圈子介绍
					</view>
					<view class="circle_label">
						{{circle.label.list[0].label_name || ''}} {{circle.label.count >= 2 && circle.label.list[1].label_name}}
					</view>
				</view>
				<view class="circle_content_b" v-if="tabIndex == 4" @click="clickCircle">
					{{circle.description || '暂无介绍'}}
					<template v-if="circle.pics.length && tabIndex == 4">
						<template v-for="(item, index) in circle.pics">
							<image  :src="item" width="100%" mode="widthFix"/>
						</template>
					</template>
				</view>
				<view class="circle_user" v-if="tabIndex == 0">
					<view class="circle_content_h">
						<view class="circle_content_t">
							活跃成员
						</view>
					</view>
					<view class="promoter-list">
						<view class='list' v-if="list && list.length">
							<block v-for="(item,index) in list" :key="index">
								<view class='item acea-row row-between-wrapper'>
									<view class="picTxt acea-row row-between-wrapper">
										<view class='pictrue' @click="goUrl('/pages/plantGrass/plant_user/index?is_service=1&id='+item.uid)">
											<image :src='item.avatar ? item.avatar : "/static/images/f.png"'></image>
										</view>
										<view class='text' @click="goUrl('/pages/plantGrass/plant_user/index?is_service=1&id='+item.uid)" style="flex:1;overflow: hidden;">
											<view class='name line1'>{{item.nickname}}</view>
											<view class="label">{{item.label[0]}}</view>
										</view>
										<view class="user_contact acea-center">
											<view class="user_contact_wx" @click="eventFunction">
												<image src="https://ly.jukee.net/uploads/def/20230703/8a86ee47e8ca30aa63ce6ad95c1bc151.png" />
											</view>
											<view class="user_contact_tel" @click="eventFunction">
												<image src="https://ly.jukee.net/uploads/def/20230703/54b09da7a3583769bae9b03a9d626fa7.png" />
											</view>
										</view>
										<!-- <view class="contact_btn" @click="couponTap2(item)">
											联系她
										</view> -->
									</view>
								</view>
							</block>
						</view>
						<emptyPage v-else title="暂无数据"></emptyPage>
					</view>
				</view>
				<view class="demand-content" v-if="tabIndex == 3">
					<demand :list="list" :isCirle="true"  @eventFunction="eventFunction"></demand>
				</view>
				<view class="service-content" v-if="tabIndex == 1">
					<service :list="list" :type="2" @eventFunction="eventFunction" :isCirle="true"></service>
				</view>
				<view class="more_list font-size36-bold" v-if="list.length" @click="clickTips">查看更多</view>
			</view>
			<view class="circle_btn">
				<view class="create_circle_button" @click="createCircle">我要建圈</view>
				<view class="pay_circle_button" @click="getJoinCircle">进入人脉圈</view>
				<!-- {{circle.type != 1 ? ('-入圈次数：' + (circle_user_info.circle_number || 0) + '次') : (circle.pay_type == 1 ? ('-入圈价格：¥'+(circle.price || 0)) : '')}} -->
			</view>
		</view>
		
		<!-- <view class="circle_number_content" v-if="is_circle_number_list">
			<view class="circle_number_list">
				<view class="circle_number_title">
					<view class="user_circle_number">
						入圈个数：<text class="user_circle_count">{{circle_user_info.circle_number || 0}}</text>次
					</view>
					<view class="circle_number_close"><text class="iconfont icon-guanbi" @click="is_circle_number_list = false"></text></view>
				</view>
				<view class="circle_number_lst">
					<view v-for="(item, index) in pay_circle_number_list" :key="index" class="circle_number_item" @click="clickCircleNumber(item)">
						<view class="circle_number_num">{{item.number}}个圈子</view>
						<view class="circle_number_price">{{item.price}}元</view>
					</view>
				</view>
			</view>
			<view class="circle_number_ceng" @click="is_circle_number_list = false"></view>
		</view> -->
		<payment :payMode="payMode" :order_id="rechar_id" :pay_close="pay_close" :is-call="true" @onChangeFun="onChangeFun"
			 :totalPrice="totalPrice" :is_extend="1" :is_svip="true"></payment>
		<!-- <payDataList :pay_close="is_circle_number_list" :payMode="payMode" :isCall="true" :payTitle="'入圈个数'" :payGroupName="'pay_circle_number'" :userCount="circle_user_info.circle_number" unit="个圈子"></payDataList> -->
		<!-- 二维码弹窗 -->
		<view class="popup_qrcode_ceng" v-show="is_popup_qrcode && circle.qr_code" @click="is_popup_qrcode = false">
			<view class="popup_qrcode_content">
				<image :src="circle.qr_code" mode="widthFix" />
				<view class="popup_qrcode_tips">圈子会员方可进群</view>
			</view>
		</view>
		<!-- 二维码弹窗end -->
		<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize>
		<!-- 购买查看会员次数弹窗 -->
		<paymentData :payMode="payMode" :pay_close="is_circle_number_list" :is-call="true" @onChangeFun="onChangeFun" :payTitle="'入圈次数'" :payGroupName="'pay_circle_number'" :userCount="circle_user_info.circle_number" :unit="'次'" :rechargeType="14"></paymentData>
		<!-- 升级VIP弹窗 -->
		<view class="user_vip_tips" v-if="user_vip_tips">
			<view class="user_vip_back"></view>
			<view class="user_vip_content">
				<view class="user_vip_close" @click="user_vip_tips = false">
					<image src="https://ly.jukee.net/uploads/default/20230803/8d5635ef7c1504bfadbd85f0a04270cc.png" />
				</view>
				<view class="user_vip_icon">
					<image src="https://img.jukee.net/def/3902e202311271626269626.png" />
				</view>
				<view class="user_vip_title font-size32-bold">成为VIP会员</view>
				<view class="user_vip_tit font-size36-bold" style="font-size: 46rpx;">无限添加客户微信<br/>查看所有客户联系方式</view>
				<view class="user_vip_messag">更多权益请在 “我的” 会员中心查看</view>
				<view class="user_vip_btn" @click="goUrl('/pages/annex/vip_paid/index')">确定</view>
			</view>
		</view>
		<!-- 进圈提醒 -->
		<view class="user_vip_tips" v-if="join_circle_tips">
			<view class="user_vip_back"></view>
			<view class="user_vip_content" style="left: 100rpx;right: 100rpx;padding: 80rpx 0;">
				<view class="user_vip_close" @click="join_circle_tips = false">
					<image src="https://ly.jukee.net/uploads/default/20230803/8d5635ef7c1504bfadbd85f0a04270cc.png" />
				</view>
				<view class="user_vip_title font-size36-bold">成为该圈成员</view>
				<view class="user_vip_tit font-size36-bold">可查看所有用户信息</view>
				<view class="user_vip_btn" @click="getJoinCircle">加入</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		getSystemGroupData
	} from "@/api/api";
	import {
		circleUserInfo,
		getCircle,
		joinCircle,
		payCircle,
		payCircleNumber,
		enteringCircle,
		recommendCommunity
	} from "@/api/circle";
	import { recommendCustom, userHasReward } from '@/api/user.js'
	import { mapGetters } from "vuex";
	import { configMap } from "@/utils";
	import authorize from '@/components/Authorize';
	import payment from '@/components/payment';
	import payDataList from '@/components/payDataList';
	import paymentData from '@/components/payDataList';
	import demand from '@/components/demand';
	import service from '@/components/service';
	import { HTTP_REQUEST_URL } from '@/config/app';
	const app = getApp();
	export default {
		components: {
			authorize,
			payment,
			demand,
			service,
			payDataList,
			paymentData
		},
		data() {
			return {
				id:0,
				headerTitle: '人脉圈',
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
				circle: {},
				circle_attention: 0,
				circle_discuss: 0,
				circle_user_info: {},
				pay_circle_number_list:[],
				payMode: [{
					name: '微信支付',
					icon: 'icon-weixinzhifu',
					// #ifdef H5
					value: this.$wechat.isWeixin() ? 'weixin' : 'h5',
					// #endif
					// #ifdef MP
					value: 'routine',
					// #endif
					// #ifdef APP-PLUS
					value: 'weixin',
					// #endif
					title: '微信快捷支付',
					payStatus: true
					}
					// #ifdef H5 ||APP-PLUS
					,
					{
					name: '支付宝支付',
					icon: 'icon-zhifubao',
					// #ifdef H5 || APP-PLUS
					value: 'alipay',
					// #endif
					// #ifdef MP
					value: 'alipayQr',
					// #endif
					title: '支付宝支付',
					payStatus: true
					}
					// #endif
					,
					{
						name: "余额支付",
						icon: "icon-yuezhifu",
						value: 'balance',
						title: '可用余额:',
						number: 0,
						payStatus: this.$store.getters.globalData.yue_pay_status
					}
				],
				rechar_id: '0',
				pay_close: false,
				totalPrice: '0',
				is_circle_number_list: false,
				tabIndex:1,
				tabList:[
					{
						title:'介绍',
						is_type: 4,
					},
					{
						title:'动态',
						is_type: 1,
					},
					{
						title:'需求',
						is_type: 3,
					},
					{
						title:'成员',
						is_type: 0,
					}
				],
				/* demand_list: [],
				service_list: [],
				user_circle_list: [], */
				list: [],
				page: 1,
				limit: 10,
				is_loading: true,
				is_popup_qrcode: false, // 人脉圈微信群二维码弹窗
				user_vip_tips: false,
				join_circle_tips: false,
			};
		},
		beforeDestroy() {
		},
		computed: {...configMap({sys_intention_agree:''},mapGetters(['isLogin','viewColor','keyColor'])),
		},
		onLoad(options) {
			let that = this;
			that.id = options.id
			if (that.isLogin) {
				that.getCircleUserInfo();
				that.getCircleInfo();
				that.getPayCircleNumber();
				that.getList();
			} else {
				this.isAuto = true;
				this.isShowAuth = true
			}
		},
		onShow() {},
		onReady() {
			uni.setNavigationBarTitle({
				title: this.headerTitle
			})
		},
		methods: {
			goUrl(url){
				uni.navigateTo({
					url:url
				})
			},
			bindTab(index){
				this.tabIndex = this.tabList[index].is_type;
				this.is_loading = true;
				this.page = 1;
				this.list = [];
				this.getList();
			},
			clickCircle() {
				let that = this;
				uni.showModal({
					title: '提示：',
					content: '你不是该圈子成员，加入圈子后即可查看?',
					success: function(res) {
						if (res.confirm) {
							that.getJoinCircle()
						} else if (res.cancel) {
							// console.log('取消');
							//TODO
						}
					}
				});
			},
			// 购买人脉圈
			getJoinCircle() {
				let that = this;
				// console.log('pay_type', that.circle);
				// if(that.circle.type == 1){
					if(that.circle.pay_type == 1 && parseFloat(that.totalPrice) > 0){
						that.pay_close = true;
						return false;
					}else{
						that.payCheck('balance');
					}
				/* }else{
					if(!parseInt(that.circle_user_info.circle_number)){
						that.is_circle_number_list = true;
						return false;
					}else{
						that.setEnteringCircle();
					}
				} */
			},
			// 创建人脉圈
			createCircle() {
				let that = this;
				if(that.isLogin) {
					/* userHasReward({type: 'is_svip'}).then(res=>{
						if(res.data.status == 1) { */
							that.$util.Tips('/pages/extends/circle_create/index')
						/* } else {
							that.user_vip_tips = true;
						}
					}) */
				} else {
					return that.$util.Tips({title: '请先登录'}, {
						tab: 1,
						url: '/pages/user/index'
					})
				}
			},
			// 创建人脉圈
			userCircle() {
				if(this.circle && this.circle.uid) {
					this.$util.Tips('/pages/plantGrass/plant_user/index?id='+this.circle.uid)
				}
			},
			// 获取用户金额
			getCircleUserInfo() {
				let that = this;
				circleUserInfo().then(res=>{
					that.circle_user_info = res.data
					// #ifdef H5 ||APP-PLUS
					that.payMode[2].number = res.data.now_money;
					// #endif
					// #ifndef H5 ||APP-PLUS
					that.payMode[1].number = res.data.now_money;
					// #endif
				}).catch(err=>{
					console.log('err2', err)
				})
			},
			// 获取人脉圈信息
			getCircleInfo() {
				let that = this;
				getCircle(that.id, {circle_type:1}).then(res=>{
					that.headerTitle = res.data.title
					that.totalPrice = res.data.price
					that.circle = res.data
					that.circle_attention = res.data.circle_attention
					that.circle_discuss = res.data.circle_discuss
				}).catch(err=>{
					console.log('err', err)
				})
			},
			// 获取购买人脉圈次数列表
			getPayCircleNumber() {
				let that = this;
				getSystemGroupData({name:'pay_circle_number'}).then(res=>{
					that.pay_circle_number_list = res.data.list
				}).catch(err=>{
					console.log('err', err)
				})
			},
			clickCircleNumber(data) {
				let that = this;
				that.pay_circle_numer = data;
				that.totalPrice = data.price;
				that.pay_close = true;
			},
			onChangeFun: function(e) {
				let opt = e;
				let action = opt.action || null;
				let value = opt.value != undefined ? opt.value : null;
				action && this[action] && this[action](value);
			},
			payClose: function() {
				this.is_circle_number_list = false;
				this.pay_close = false;
			},
			payOrderSuccess() {
				this.getCircleUserInfo();
			},
			payCheck: function(type) {
				// console.log(type)
				let that = this;
				// if(that.circle.type == 1){
					if(type == 'balance' && parseFloat(that.circle.price) > parseFloat(parseFloat(that.circle_user_info.now_money))) return that.$util.Tips({title: '余额不足'})
					payCircle(that.id, {type}).then(res=>{
						that.callPay(res);
					}).catch(err=>{
						that.$util.Tips({title:err})
					})
				// } else {
				// 	if(type == 'balance' && parseFloat(that.pay_circle_numer.price) > parseFloat(parseFloat(that.circle_user_info.now_money))) return that.$util.Tips({title: '余额不足'})
				// 	payCircleNumber({type, recharge_id: that.pay_circle_numer.group_data_id}).then(res=>{
				// 		that.callPay(res);
				// 	}).catch(err=>{
				// 		that.$util.Tips({title:err})
				// 	})
				// }
				
			},
			setEnteringCircle() {
				let that = this;
				enteringCircle(that.id).then(res=>{
					return that.$util.Tips({
						title: res.data.msg,
						icon: 'success'
					}, {
						tab: 5,
						url: '/pages/extends/circle_create/circle_info?id='+that.id
					});
				}).catch(err=>{
					if (err == '您的人脉圈次数不足,请购买人脉圈次数!') {
						that.getCircleUserInfo();
						that.is_circle_number_list = true;
						return  false;
					} 
					that.$util.Tips({title:err})
				})
			},
			couponTap2(data) {
				let that = this;
				if (this.isLogin === false) {
					return this.$util.Tips({title: '请先登录'}, {
						tab: 1,
						url: '/pages/user/index'
					})
				} else {
					uni.navigateTo({
						url: `/pages/chat/customer_list/chat?userId=${data.uid}`
					});
				}
			},
			getList() {
				let that = this;
				if(!that.is_loading) return false;
				if(that.tabIndex == 1 || that.tabIndex == 3) {
					let data = {
						is_type: that.tabIndex,
						circle_id: that.id,
						page: that.page,
						limit: that.limit,
						is_top_service: that.tabIndex == 1 ? 1 : '',
					}
					recommendCommunity(data).then(res=>{
						that.list = that.list.concat(res.data.list)
						that.is_loading = res.data.list.length >= that.limit
						that.page++
					}).catch(err=>{
						console.log(err)
					})
				} else {
					let data = {
						page: that.page,
						limit: that.limit,
						circle_id: that.id,
					}
					recommendCustom(data).then(res => {
						that.list = that.list.concat(res.data.list)
						that.is_loading = res.data.list.length >= that.limit;
						that.page++
					}).catch(err=>{
					})
				}
			},
			// 授权回调
			onLoadFun: function() {
				this.isShowAuth = false;
				return uni.switchTab({
					url: '/pages/user/index'
				});
			},
			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e
			},
			// 调用支付
			callPay(res) {
				let that = this, status = res.data.type,
					jsConfig = res.data.config,
					goPages = '/pages/extends/circle_create/circle_info?id='+that.id;
				console.log(666,status, goPages)
				switch (status) {
					case 'ORDER_EXIST':
					case 'EXTEND_ORDER':
					case 'PAY_ERROR':
					case 'error':
						uni.hideLoading();
						return that.$util.Tips({
							title: res.message
						}, {
							tab: 5,
							url: goPages
						});
						break;
					case 'success':
						uni.hideLoading();
						return that.$util.Tips({
							title: res.data.message,
							icon: 'success',
							endtime: 0
						}, {
							tab: 5,
							url: goPages
						});
						break;
					case 'alipay':
					case "alipayQr":
						uni.hideLoading();
						that.$emit('onChangeFun', {
							action: 'payClose'
						});
						uni.navigateTo({
							url: '/pages/order_pay_back/index?keyCode='+callback_key+'&url='+jsConfig+'&type=10'
						})
						return;
						break;
						// #ifndef MP
					case "wechat":
					case "weixin":
					case "weixinApp":
						jsConfig.timeStamp = jsConfig.timestamp;
						// #ifndef APP-PLUS
						that.$wechat.pay(jsConfig).then(res => {
							return that.$util.Tips({
								title: res.message,
								icon: 'success'
							}, {
								tab: 4,
								url: goPages
							});
						}).catch(res => {
							if (res.errMsg == 'chooseWXPay:cancel') return that.$util.Tips({
								title: '取消支付'
							}, {
								tab: 5,
								url: goPages
							});
						})
						// #endif
						// #ifdef APP-PLUS
						let mp_pay_name=''
						if(uni.requestOrderPayment){
							mp_pay_name='requestOrderPayment'
						}else{
							mp_pay_name='requestPayment'
						}
						uni[mp_pay_name]({
							provider: 'wxpay',
							orderInfo: jsConfig,
							success: (e) => {
								let url = goPages;
								return that.$util.Tips({
									title: '支付成功',
									icon: 'success'
								}, {
									tab: 4,
									url: url
								});
							},
							fail: (e) => {
								uni.showModal({
									content: "支付失败",
									showCancel: false,
									success: function(res) {
										let url = goPages;
										uni.redirectTo({
											url: url
										})
									}
								})
							},
							complete: () => {
								uni.hideLoading();
							},
						});
						// #endif
						break;
						// #endif
						// #ifdef MP
					case "routine":
						jsConfig.timeStamp = jsConfig.timestamp;
						let mp_pay_name=''
						if(uni.requestOrderPayment){
							mp_pay_name='requestOrderPayment'
						}else{
							mp_pay_name='requestPayment'
						}
						uni[mp_pay_name]({
							...jsConfig,
							success: function(res) {
								uni.hideLoading();
								// that.getUserInfo();
								// that.getRecharge();
								// console.log('12323424')
								if(that.circle.type == 1){
									return that.$util.Tips({
										title: '支付成功',
										icon: 'success'
									}, {
										tab: 5,
										url: goPages
									});
								}else{
									that.pay_close = false,
									that.is_circle_number_list = false
									that.getCircleUserInfo()
									return that.$util.Tips({
										title: '支付成功',
										icon: 'success'
									});
								}
							},
							fail: function(e) {
								uni.hideLoading();
								return that.$util.Tips({
									title: '取消支付'
								}, {
									tab: 5,
									url: '/pages/extends/circle_create/circle_pay?id='+that.id
								});
							},
						})
						break;
						// #endif
					case "balance":
						uni.hideLoading();
						//余额不足
						if(that.circle.type == 1){
							return that.$util.Tips({
								title: res.data.msg
							}, {
								tab: 5,
								url: goPages
							});
						}else{
							that.pay_close = false,
							that.is_circle_number_list = false
							that.getCircleUserInfo()
							return that.$util.Tips({
								title: res.data.msg
							});
						}
						
						break;
						// #ifdef H5
					case 'h5':
						let host = window.location.protocol + "//" + window.location.host;
						let url = `${host}/pages/users/user_payment/index`
						let eUrl = encodeURIComponent(url)
						let jsurl = jsConfig.mweb_url || jsConfig.h5_url
						let locations = `${jsurl}&redirect_url=${eUrl}`
						setTimeout(() => {
							location.href = locations;
						}, 100);
						break;
						// #endif
						// #ifdef APP-PLUS
					case 'alipayApp':
						uni.requestPayment({
							provider: 'alipay',
							orderInfo: jsConfig,
							success: (e) => {
								return that.$util.Tips({
									title: '支付成功',
									icon: 'success'
								}, {
									tab: 5,
									url: goPages
								});
							},
							fail: (e) => {
								uni.showModal({
									content: "支付失败",
									showCancel: false,
									success: function(res) {
										uni.redirectTo({
											url: goPages
										})
									}
								})
							},
							complete: () => {
								uni.hideLoading();
							},
						});
						break;
						// #endif
				}
			},
			clickTips() {
				this.$util.Tips({title: '付费进圈查看更多内容'})
			},
			clickUserContact() {
				this.$util.Tips({title: '付费进圈可查看会员联系方式'})
			},
			eventFunction() {
				this.join_circle_tips = true;
			},
			openPopupQrcode() {
				if (!this.circle.qr_code) {
					return this.$util.Tips({
						title: '圈主还未上传群二维码'
					})
				}
				this.is_popup_qrcode = true
			}
		},
		// #ifdef MP
		onShareAppMessage: function() {
			let that = this;
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			});
			return {
				title: that.circle.title,
				path: '/pages/extends/circle_create/circle_info?id='+that.circle.id+'&spid=' + that.$Cache.get('UID')
			}
		},
		onShareTimeline: function() {
			let that = this;
			return {
				title: that.circleInfo.title,
				query: {
					spid: that.userInfo.uid
				},
				imageUrl:  that.share_qrcode
			};
		},
		// #endif
		onReachBottom() {
			// this.getList();
		}
	}
</script>

<style scoped lang="scss">
.circle {
	// margin: 30rpx;
	box-sizing: border-box;
	// border-radius: 20rpx;
	// background-color: #fff;
	padding-bottom: 100rpx;
	// border: 2px solid #000;
	.circle_info {
		/* display: flex;
		flex-direction: column;
		align-items: center;
		padding: 30rpx 30rpx 0;
		border-bottom: 2px solid #000; */
		background: url('https://img.jukee.net/def/5d1d8202310130054287892.jpg') center / 100% 100% no-repeat;
		padding: 1rpx;
		.circle_info_content {
			display: flex;
			flex-direction: column;
			// align-items: center;
			padding: 30rpx;
			background-color: #F5F5F5;
			margin: 80rpx 80rpx 20rpx;
			border-radius: 10rpx;
			// border-bottom: 2px solid #000;
			position: relative;
		}
		.circle_qr_code_btn {
			position: absolute;
			top: 20rpx;
			right: 20rpx;
		}
		.circle_info_head {
			display: flex;
			align-items: center;
		}
		.circle_avatar image {
			width: 120rpx;
			height: 120rpx;
			border: 2px solid #ccc;
			border-radius: 10rpx;
		}
		.circle_title {
			flex: 1;
			font-size: 36rpx;
			font-weight: bold;
			margin-left: 20rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
		.circle_statistics {
			display: flex;
			align-items: center;
			width: 100%;
			text-align: center;
			// margin-top: 30rpx;
			// padding: 30rpx;
			// border-top: 2rpx dashed;
			.circle_statistics_item {
				flex: 1;
				.circle_statistics_num {
					font-size: 36rpx;
					font-weight: bold;
					height: 70rpx;
					line-height: 70rpx;
					image {
						width: 50rpx;
						height: 50rpx;
						border-radius: 50%;
					}
				}
			}
		}
	}
	.navTabBox{
		background: #F6F6F6;
		padding: 30rpx;
	}
	.longTab{
		display: flex;
		text-align: center;
	}
	.tab-item{
		width: 50%;
		display: inline-block;
		// padding: 30rpx 0;
		text{
			position: relative;
			display: inline-block;
			font-size: 34rpx;
			color: #323232;
			line-height: 52rpx;
		}
	}
	.tab-item.on{
		color: var(--view-theme);
		text{
			font-size: 38rpx;
			&:after{
				content: "";
				display: inline-block;
				width: 90%;
				height: 15rpx;
				// background-color: var(--view-theme);
				background: url('http://ly.jukee.net/uploads/default/20230629/335f742a6bee3fdbc75d81c86c6ba350.png') center / contain no-repeat;
				position: absolute;
				left: 5%;
				bottom: -20rpx;
			}
		}
	}
	.circle_content {
		background-color: #FFF;
		padding: 1rpx 30rpx 30rpx;
	}
	.circle_content, .circle_user {
		.circle_content_h {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx;
			.circle_content_t {
				font-size: 36rpx;
				font-weight: bold;
			}
		}
		.circle_content_b {
			padding: 30rpx;
			word-break: break-all;
			border: 1px solid #ccc;
			border-radius: 20rpx;
			white-space: pre-wrap;
		}
		.promoter-list {
			padding: 0 30rpx 30rpx;
		}
		.promoter-list .list {
			.item {
				padding: 30rpx;
			}
		}
		.promoter-list .list .sortNav {
			background-color: #fff;
			height: 76rpx;
			border-bottom: 1px solid #eee;
			color: #333;
			font-size: 28rpx;
		}
		
		.promoter-list .list .sortNav .sortItem {
			text-align: center;
			flex: 1;
		}
		
		.promoter-list .list .sortNav .sortItem image {
			width: 24rpx;
			height: 24rpx;
			margin-left: 6rpx;
			vertical-align: -3rpx;
		}
		
		.promoter-list .list .item {
			background-color: #fff;
			border-bottom: 1px solid #eee;
			height: 152rpx;
			padding: 0 30rpx 0 20rpx;
			font-size: 24rpx;
			color: #666;
			margin-bottom: 20rpx;
			.picTxt  {
				width: 100%;
				justify-content: start;
				.pictrue {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}
				.text {
					margin-left: 20rpx;
					padding-top: 8rpx;
					.name {
						font-size: 36rpx;
						color: #37393A;
						line-height: 42rpx;
					}
					.label {
						margin-top: 12rpx;
						font-size: 30rpx;
						font-weight: 400;
						color: #767676;
						line-height: 32rpx;
					}
				}
				.contact_btn {
					font-size: 30rpx;
					font-weight: 500;
					color: #1C211D;
					line-height: 42rpx;
					padding: 12rpx 36rpx;
					background: #FFE103;
					border-radius: 37rpx;
					margin-left: auto;
				}
				.user_contact {
					width: 180rpx;
					justify-content: space-between;
					margin-left: auto;
					.user_contact_wx image{
						width: 60rpx;
						height: 44rpx;
					}
					.user_contact_tel image{
						width: 60rpx;
						height: 60rpx;
					}
				}
			}
		}
	}
	.circle_btn {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		// grid-gap: 30rpx;
		text-align: center;
		position: fixed;
		left: 0;
		bottom: 0;
		// background-color: #fff;
		// padding: 10rpx 30rpx;
		width: 100%;
		.create_circle_button {
			font-size: 36rpx;
			font-weight: bold;
			text-align: center;
			// display: table;
			background: #DADADA;
			color: #000;
			// margin: 0 auto;
			padding: 30rpx 50rpx;
			// border-radius: 10rpx;
			// border: 1rpx solid #ccc;
		}
		.pay_circle_button {
			font-size: 36rpx;
			font-weight: bold;
			text-align: center;
			// display: table;
			background: #FFE60F;
			// margin: 0 auto;
			padding: 30rpx 50rpx;
			// border-radius: 10rpx;
			// border: 1rpx solid #ccc;
		}
	}
}

.circle_number_list {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: #fff;
	padding: 50rpx 30rpx;
	z-index: 5;
	border-radius: 16rpx 16rpx 0 0;
	.circle_number_title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 32rpx;
		font-weight: bold;
		.user_circle_count {
			color: #ff6a00;
		}
	}
	.circle_number_lst {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 20rpx;
		margin-top: 50rpx;
		.circle_number_item {
			background: #FFE60F;
			padding: 20rpx 10rpx;
			text-align: center;
			border-radius: 16rpx;
			.circle_number_num {
				font-size: 36rpx;
				font-weight: bold;
			}
			.circle_number_price {
				color: #ff6a00;
			}
		}
	}
}
.circle_number_ceng {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	z-index: 2;
}
.more_list {
	padding: 30rpx;
	text-align: center;
}
.popup_qrcode_ceng {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.8);
	z-index: 1;
	.popup_qrcode_content { 
		width: 500rpx;
		margin: 20vh auto;
		position: relative;
		image {
			width: 100%;
		}
		.popup_content {
			background-color: #fff;
			font-size: 35rpx;
			font-weight: bold;
			text-align: center;
			padding: 50rpx 20rpx 20rpx;
			border-radius: 10rpx;
		}
		.popup_qrcode_tips {
			background-color: #FFFF00;
			text-align: center;
			font-size: 36rpx;
			font-weight: bold;
			padding: 30rpx;
			position: absolute;
			width: 100%;
			top: 40%;
		}
		.popup_tel {
			
		}
		.popup_close {
			background-color: var(--view-theme);
			padding: 20rpx;
			border-radius: 10rpx;
			margin-top: 20rpx;
		}
	}
}
// 升级VIP弹窗
.user_vip_back {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
}
.user_vip_content {
	background-color: #fff;
	position: fixed;
	top: 30%;
	left: 50rpx;
	right: 50rpx;
	// margin: 50% 50rpx 0;
	border-radius: 30rpx;
	padding: 30rpx;
	text-align: center;
	.user_vip_close {
		position: absolute;
		right: 30rpx;
		top: 50rpx;
		image {
			width: 50rpx;
			height: 50rpx;
		}
	}
	.user_vip_icon {
		margin: 0 auto;
		image {
			width: 140rpx;
			height: 130rpx;
			margin: 0 auto;
			display: block;
		}
	}
	.user_vip_tit  {
		margin-top: 20rpx;
	}
	.user_vip_messag {
		font-size: 32rpx;
		margin-top: 30rpx;
	}
	.user_vip_btn {
		font-weight: bold;
		background-color: #FDE515;
		display: inline-block;
		padding: 10rpx 50rpx;
		border-radius: 10rpx;
		margin-top: 30rpx;
		font-size: 42rpx;
	}
}
</style>
